<template>
   <div class="cnyzs-author GradientAnimation">
      <!-- 头部 -->
      <div class="author-header">
         <div class="author-header-top"
            :style="{ backgroundImage: `url('https://cos.alanoneup.com/cnyzs/1/image/2023/07/07/1688692527984-27.jpeg')` }">
            <div class="mask-layer"></div>
            <div class="user-info">
               <div class="profile-photo">
                  <img style="width: 100%; height: 100%;" :src="AuthorInfo.useravatar" alt="">
                  <div class="change-profile-phot">更换头像</div>
               </div>
               <div class="info">
                  <div class="name">{{ AuthorInfo.username }}</div>
                  <div class="personalized-signature">这里是个性签名哦！</div>
               </div>
            </div>
         </div>
         <div class="author-header-nav">
            <ClientOnly>
               <ul class="nav">
                  <template v-for="(item, index) in nav" :key="index">
                     <li v-if="permissionMenu(item)" :class="{ navActive: navActive === index }"
                        @click="clickNav(item, index)">
                        <span>{{ item.name }}</span>
                        <div class="decorate"></div>
                     </li>
                  </template>
               </ul>
               <div class="sousuo">
                  <span class="iconfont icon-sousuo1"></span>
                  <input type="text" placeholder="搜帖子文章" @keyup.enter="">
               </div>
            </ClientOnly>
         </div>
      </div>
      <!-- 内容 -->
      <div class="author-content">
         <component class="GradientAnimation" :is="componentsVue.get(componentsActive || 'home')" :AuthorInfo="AuthorInfo"
            :AuthorConfig="AuthorConfig" :ismy="ismy"></component>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
const { cnyzs } = storeToRefs(cnyzsCommonpinia())
const { userinfo, token } = storeToRefs(cnyzsUserpinia())
const { id } = useRoute().params
const { type } = useRoute().query
onMounted(() => {
   document.body.style.setProperty('--aoir-color-primary', cnyzs.value.COMMON_THEMECOLOR);
})
// 根据用户ID查询用户信息和用户配置，判断返回相应数据
const ismy = ref(false) // true 代表是自己访问自己主页
const AuthorConfig = ref({})    // 当前ID用户配置
const AuthorInfo: any = ref({}) // 当前ID用户信息
const getAuthorInfo = async () => {
   if (!token) return
   const res: any = await cnyzsRequest('/api/user/author-info/' + id, { method: 'GET' })
   if (res.status === 200) {
      AuthorInfo.value = res.data
      if (Number(id) === userinfo.value.id) ismy.value = true // 是我的主页
   }
}
getAuthorInfo()

// 准备导航数据
const nav = ref([
   {
      name: '主页',
      path: '',
      type: 'home',
      ismy: false
   },
   {
      name: '内容',
      path: '',
      type: '752',
      ismy: false
   },
   {
      name: '我的口袋',
      path: '',
      type: '56232',
      ismy: false
   },
   {
      name: '资料设置',
      path: '',
      type: 'setting',
      ismy: true
   },
])
const permissionMenu = (item: any): boolean => {
   // item.ismy === false 表示非当前用户也可以访问
   if (item.ismy === false) {
      return true
   } else {
      // item.ismy === true 必须是当前作者ID用户才能访问
      if (item.ismy && ismy.value) {
         return true
      } else {
         return false
      }
   }
}

// 准备导航组件
const componentsActive: any = ref('' || type)
const componentsVue = new Map<string, any>()
const componentsArr = ['home', 'setting']
const componentsMap = [
   { components: defineAsyncComponent(() => import('./AuthorHome/index.vue')) }, // 用户主页
   { components: defineAsyncComponent(() => import('./AuthorSet/index.vue')) },  // 资料设置
]
componentsMap.map((v: any, index: number) => componentsVue.set(componentsArr[index], v.components))

// 点击导航事件
const navActive = ref(0)
const clickNav = (item: any, index: number) => {
   navActive.value = index
   componentsActive.value = item.type
   if (item.type === 'home') {
      navigateTo('/Author/' + id)
   } else {
      navigateTo('/Author/' + id + '?type=' + item.type)
   }
}
// 处理导航状态
nav.value.forEach((v: any, index: number) => {
   if (v.type === type) {
      navActive.value = index
   }
})






useHead({
   title: computed(() => {
      return AuthorInfo.value.username
   }),
})

</script> 
<style lang="scss" scoped>
.cnyzs-author {
   width: var(--aoir-m-width);
   min-height: calc(100vh - 85px);
   // min-height: 700px;
   margin: 0 auto 20px;
   box-shadow: var(--aoir-box-shadow);

   .author-header {
      width: 100%;
      height: 265px;
      border-radius: var(--aoir-border-radius);
      box-shadow: var(--aoir-box-shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.262);

      &-top {
         flex: 1;
         background-position: 50%;
         background-size: cover;
         position: relative;
         display: flex;
         align-items: flex-end;
         padding: 20px;

         .mask-layer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 84px;
            background-image: url();
            background-repeat: repeat-x;
         }

         .user-info {
            display: flex;
            position: relative;
            z-index: 2;

            .profile-photo {
               width: 80px;
               height: 80px;
               border-radius: 50%;
               background-color: #eeeeeeb3;
               display: flex;
               justify-content: center;
               align-items: center;
               box-shadow: 0px 0px 35px 0px rgba(58, 58, 58, 0.568);
               overflow: hidden;
               border: 3px solid #eeeeee00;
               margin-right: 20px;
               position: relative;
               cursor: pointer;

               .change-profile-phot {
                  position: absolute;
                  top: 0;
                  width: 100%;
                  height: 100%;
                  background-color: #00000088;
                  color: #f5f5f5;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  font-size: 14px;
                  cursor: pointer;
                  opacity: 0;
                  transition: all .2s ease-in-out;

                  &:hover {
                     opacity: 1;
                  }
               }
            }

            .info {
               display: flex;
               flex-direction: column;
               justify-content: center;

               .name {
                  font-size: 22px;
                  font-weight: 700;
                  color: #FFF;
                  text-shadow: 2px 2px 10px #00000061;
               }

               .personalized-signature {
                  display: flex;
                  margin-top: 7px;
                  font-size: 14.5px;
                  color: #e1e1e1;
               }
            }
         }
      }

      &-nav {
         width: 100%;
         height: 75px;
         background-color: #fffffff5;
         // padding: 20px;
         display: flex;
         align-items: center;

         .nav {
            display: flex;
            height: 100%;

            li {
               display: flex;
               align-items: center;
               height: 100%;
               padding: 0 15px;
               // margin-right: 30px;
               cursor: pointer;
               position: relative;

               &:nth-child(1) {
                  margin-left: 20px;
               }

               .decorate {
                  position: absolute;
                  bottom: 0;
                  left: 50%;
                  transform: translateX(-50%);
                  height: 3px;
                  width: 0%;
                  border-radius: 3px;
                  background-color: var(--aoir-color-primary);
                  opacity: 0;
                  transition: all 0.3s ease-in-out;
               }

               &:hover {
                  .decorate {
                     width: 100%;
                     opacity: 1;
                  }
               }
            }

            .navActive {
               // box-shadow: 0 0 2px rgba(0, 0, 0, .1);
               color: var(--aoir-color-primary);

               .decorate {
                  width: 100%;
                  opacity: 1;
               }
            }
         }

         .sousuo {
            position: relative;
            margin-left: 20px;

            input {
               width: 220px;
               height: 38px;
               border: 0;
               font-size: 16px;
               background-color: #FFF;
               border-bottom: 1px solid #f5f6f7;
               border-radius: 4px;
               caret-color: var(--aoir-color-primary-2);
               padding: 0 10px 0 35px;
               border-radius: 50px;
               box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

               &::placeholder {
                  color: #CCD0DB;
               }
            }

            .iconfont {
               position: absolute;
               left: 10px;
               top: 50%;
               transform: translateY(-50%);
               font-weight: 600;
               color: #444;
            }
         }
      }

   }

   .author-content {
      margin-top: 16px;
      width: 100%;
      // background-color: #fffffff5;
      box-shadow: 0px 0px 35px 0px rgba(181, 181, 181, 0.118);
      border-radius: var(--aoir-border-radius);
      box-shadow: var(--aoir-box-shadow);
   }
}
</style>